<style>
    :root {
        --primary: #0d6efd;
        --secondary: #6c757d;
        --dark: #212529;
        --light: #f8f9fa;
        --accent-1: #4361ee;
        --accent-2: #3f37c9;
        --accent-3: #4cc9f0;
        --accent-4: #f72585;
        --transition: all 0.3s ease;
    }

    body {
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        background-color: #f0f2f5;
        padding: 0;
        margin: 0;
        color: #333;
    }

    /***  页面展示  ***/
    .container {
        min-height: 100vh;
        padding: 2rem;
    }

    .page-title {
        text-align: center;
        margin-bottom: 2.5rem;
        font-weight: 700;
        color: var(--dark);
    }

    .section-description {
        text-align: center;
        margin-bottom: 3rem;
        color: #666;
        font-size: 1.1rem;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    .error-category {
        margin-bottom: 4rem;
    }

    .category-title {
        font-size: 1.3rem;
        margin-bottom: 1.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid var(--primary);
        display: inline-block;
    }

    .error-example {
        margin-bottom: 2rem;
        transition: var(--transition);
    }

    .error-label {
        font-size: 0.9rem;
        color: #666;
        margin-top: 1rem;
        margin-bottom: 2rem;
        text-align: center;
    }

    /* 全屏404页面基础样式 */
    .fullscreen-error {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 2rem;
        z-index: 1050;
        text-align: center;
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
    }

    .fullscreen-error.show {
        opacity: 1;
        visibility: visible;
    }

    .fullscreen-error .error-content {
        max-width: 600px;
        width: 100%;
    }

    .fullscreen-error .error-code {
        font-size: 6rem;
        font-weight: 900;
        margin-bottom: 1rem;
        line-height: 1;
    }

    .fullscreen-error .error-title {
        font-size: 2rem;
        margin-bottom: 1.5rem;
        font-weight: 600;
    }

    .fullscreen-error .error-message {
        font-size: 1.1rem;
        margin-bottom: 2.5rem;
        line-height: 1.6;
    }

    .fullscreen-error .btn {
        padding: 0.75rem 1.5rem;
        font-size: 1.1rem;
        margin: 0 0.5rem;
    }

    /* 404页面样式变体 */
    .error-light {
        background-color: var(--light);
        color: var(--dark);
    }

    .error-dark {
        background-color: var(--dark);
        color: var(--light);
    }

    .error-primary {
        background-color: var(--primary);
        color: white;
    }

    .error-accent-1 {
        background-color: var(--accent-1);
        color: white;
    }

    .error-gradient {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

    .error-double-code .error-code {
        position: relative;
        display: inline-block;
    }

    .error-double-code .error-code::after {
        content: attr(data-code);
        position: absolute;
        top: 10px;
        left: 10px;
        color: rgba(0, 0, 0, 0.1);
        z-index: 0;
    }

    .error-double-code .error-code span {
        position: relative;
        z-index: 1;
    }

    .error-outline .error-code {
        color: transparent;
        -webkit-text-stroke: 2px currentColor;
    }

    .error-shadow .error-code {
        text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.1);
    }

    /* 动画效果 */
    .error-slide-down {
        transform: translateY(-100%);
    }

    .error-slide-down.show {
        transform: translateY(0);
    }

    .error-fade-in {
        opacity: 0;
    }

    .error-fade-in.show {
        animation: fadeIn 0.8s ease forwards;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    .error-zoom {
        transform: scale(0.8);
    }

    .error-zoom.show {
        transform: scale(1);
    }

    .error-pulse .error-code {
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.05);
        }
        100% {
            transform: scale(1);
        }
    }
</style>

<div class="container">
    <h1 class="page-title">全屏404页面样式展示</h1>
    <p class="section-description">以下展示了多种使用Bootstrap和纯CSS实现的全屏404错误页面样式，点击按钮可查看效果，适用于页面未找到的错误提示</p>

    <!-- 基础404页面 -->
    <div class="error-category">
        <h2 class="category-title"><i class="fas fa-layer-group"></i> 基础404页面</h2>

        <div class="error-example text-center">
            <button class="btn btn-primary" onclick="showError('error-1')">
                <i class="fas fa-file-alt me-2"></i>显示浅色404页面
            </button>
            <p class="error-label">浅色基础404 - 简洁清晰的设计</p>
        </div>

        <div class="error-example text-center">
            <button class="btn btn-dark" onclick="showError('error-2')">
                <i class="fas fa-file-alt me-2"></i>显示深色404页面
            </button>
            <p class="error-label">深色基础404 - 高对比度设计</p>
        </div>

        <div class="error-example text-center">
            <button class="btn btn-primary" onclick="showError('error-3')">
                <i class="fas fa-file-alt me-2"></i>显示蓝色404页面
            </button>
            <p class="error-label">蓝色主题404 - 品牌化设计</p>
        </div>
    </div>

    <!-- 创意404页面 -->
    <div class="error-category">
        <h2 class="category-title"><i class="fas fa-paint-brush"></i> 创意404页面</h2>

        <div class="error-example text-center">
            <button class="btn btn-info" onclick="showError('error-4')">
                <i class="fas fa-magic me-2"></i>显示渐变404页面
            </button>
            <p class="error-label">渐变背景404 - 现代感设计</p>
        </div>

        <div class="error-example text-center">
            <button class="btn btn-secondary" onclick="showError('error-5')">
                <i class="fas fa-layer-group me-2"></i>显示双层数字404页面
            </button>
            <p class="error-label">双层数字404 - 创意数字展示</p>
        </div>

        <div class="error-example text-center">
            <button class="btn btn-accent-3" onclick="showError('error-6')">
                <i class="fas fa-border-style me-2"></i>显示轮廓数字404页面
            </button>
            <p class="error-label">轮廓数字404 - 简约艺术感</p>
        </div>

        <div class="error-example text-center">
            <button class="btn btn-accent-1" onclick="showError('error-7')">
                <i class="fas fa-shadow me-2"></i>显示阴影效果404页面
            </button>
            <p class="error-label">阴影效果404 - 立体视觉感</p>
        </div>
    </div>

    <!-- 带动画的404页面 -->
    <div class="error-category">
        <h2 class="category-title"><i class="fas fa-film"></i> 带动画的404页面</h2>

        <div class="error-example text-center">
            <button class="btn btn-primary" onclick="showError('error-8')">
                <i class="fas fa-arrow-down me-2"></i>显示滑入动画404页面
            </button>
            <p class="error-label">滑入动画404 - 流畅过渡效果</p>
        </div>

        <div class="error-example text-center">
            <button class="btn btn-success" onclick="showError('error-9')">
                <i class="fas fa-search-plus me-2"></i>显示缩放动画404页面
            </button>
            <p class="error-label">缩放动画404 - 聚焦式进入</p>
        </div>

        <div class="error-example text-center">
            <button class="btn btn-warning" onclick="showError('error-10')">
                <i class="fas fa-heartbeat me-2"></i>显示脉冲动画404页面
            </button>
            <p class="error-label">脉冲动画404 - 吸引注意力</p>
        </div>
    </div>
</div>

<!-- 404页面实例 -->
<!-- 1. 浅色基础404 -->
<div id="error-1" class="fullscreen-error error-light">
    <div class="error-content">
        <div class="error-code">404</div>
        <h3 class="error-title">页面未找到</h3>
        <p class="error-message">抱歉，您请求的页面不存在或已被移动。请检查URL是否正确或返回首页。</p>
        <div class="d-flex flex-wrap justify-content-center gap-3">
            <button class="btn btn-primary" onclick="hideError('error-1')">
                <i class="fas fa-home me-2"></i>返回首页
            </button>
            <button class="btn btn-secondary" onclick="hideError('error-1')">
                <i class="fas fa-arrow-left me-2"></i>返回上一页
            </button>
        </div>
    </div>
</div>

<!-- 2. 深色基础404 -->
<div id="error-2" class="fullscreen-error error-dark">
    <div class="error-content">
        <div class="error-code">404</div>
        <h3 class="error-title">页面未找到</h3>
        <p class="error-message">我们无法找到您所请求的页面。可能是URL有误或页面已被删除。</p>
        <div class="d-flex flex-wrap justify-content-center gap-3">
            <button class="btn btn-light" onclick="hideError('error-2')">
                <i class="fas fa-home me-2"></i>返回首页
            </button>
            <button class="btn btn-secondary" onclick="hideError('error-2')">
                <i class="fas fa-search me-2"></i>搜索内容
            </button>
        </div>
    </div>
</div>

<!-- 3. 蓝色主题404 -->
<div id="error-3" class="fullscreen-error error-primary">
    <div class="error-content">
        <div class="error-code">404</div>
        <h3 class="error-title">页面未找到</h3>
        <p class="error-message">您访问的页面可能已被移除、更名或暂时不可用。</p>
        <div class="d-flex flex-wrap justify-content-center gap-3">
            <button class="btn btn-light" onclick="hideError('error-3')">
                <i class="fas fa-home me-2"></i>返回首页
            </button>
            <button class="btn btn-outline-light" onclick="hideError('error-3')">
                <i class="fas fa-envelope me-2"></i>联系我们
            </button>
        </div>
    </div>
</div>

<!-- 4. 渐变背景404 -->
<div id="error-4" class="fullscreen-error error-gradient">
    <div class="error-content">
        <div class="error-code">404</div>
        <h3 class="error-title">页面丢失了</h3>
        <p class="error-message">我们好像找不到您要找的页面。也许它正在度假，或者只是迷路了。</p>
        <div class="d-flex flex-wrap justify-content-center gap-3">
            <button class="btn btn-light" onclick="hideError('error-4')">
                <i class="fas fa-home me-2"></i>返回首页
            </button>
            <button class="btn btn-outline-light" onclick="hideError('error-4')">
                <i class="fas fa-compass me-2"></i>网站导航
            </button>
        </div>
    </div>
</div>

<!-- 5. 双层数字404 -->
<div id="error-5" class="fullscreen-error error-light error-double-code">
    <div class="error-content">
        <div class="error-code" data-code="404"><span>404</span></div>
        <h3 class="error-title">页面未找到</h3>
        <p class="error-message">请求的页面不存在。请检查您输入的网址是否正确。</p>
        <div class="d-flex flex-wrap justify-content-center gap-3">
            <button class="btn btn-primary" onclick="hideError('error-5')">
                <i class="fas fa-home me-2"></i>首页
            </button>
            <button class="btn btn-secondary" onclick="hideError('error-5')">
                <i class="fas fa-redo me-2"></i>刷新页面
            </button>
        </div>
    </div>
</div>

<!-- 6. 轮廓数字404 -->
<div id="error-6" class="fullscreen-error error-accent-3 error-outline">
    <div class="error-content">
        <div class="error-code">404</div>
        <h3 class="error-title">页面未找到</h3>
        <p class="error-message">您尝试访问的页面无法找到。请使用下方按钮导航至其他页面。</p>
        <div class="d-flex flex-wrap justify-content-center gap-3">
            <button class="btn btn-dark" onclick="hideError('error-6')">
                <i class="fas fa-home me-2"></i>返回首页
            </button>
            <button class="btn btn-light" onclick="hideError('error-6')">
                <i class="fas fa-list me-2"></i>浏览目录
            </button>
        </div>
    </div>
</div>

<!-- 7. 阴影效果404 -->
<div id="error-7" class="fullscreen-error error-accent-1 error-shadow">
    <div class="error-content">
        <div class="error-code">404</div>
        <h3 class="error-title">页面未找到</h3>
        <p class="error-message">抱歉，我们无法找到您请求的页面。可能是链接已过期或被移除。</p>
        <div class="d-flex flex-wrap justify-content-center gap-3">
            <button class="btn btn-light" onclick="hideError('error-7')">
                <i class="fas fa-home me-2"></i>返回首页
            </button>
            <button class="btn btn-outline-light" onclick="hideError('error-7')">
                <i class="fas fa-search me-2"></i>搜索
            </button>
        </div>
    </div>
</div>

<!-- 8. 滑入动画404 -->
<div id="error-8" class="fullscreen-error error-light error-slide-down">
    <div class="error-content">
        <div class="error-code">404</div>
        <h3 class="error-title">页面未找到</h3>
        <p class="error-message">您请求的页面不存在。请检查URL或返回首页继续浏览。</p>
        <div class="d-flex flex-wrap justify-content-center gap-3">
            <button class="btn btn-primary" onclick="hideError('error-8')">
                <i class="fas fa-home me-2"></i>返回首页
            </button>
            <button class="btn btn-secondary" onclick="hideError('error-8')">
                <i class="fas fa-arrow-left me-2"></i>返回上一页
            </button>
        </div>
    </div>
</div>

<!-- 9. 缩放动画404 -->
<div id="error-9" class="fullscreen-error error-dark error-zoom">
    <div class="error-content">
        <div class="error-code">404</div>
        <h3 class="error-title">页面未找到</h3>
        <p class="error-message">我们无法找到您所寻找的页面。请尝试其他链接或返回首页。</p>
        <div class="d-flex flex-wrap justify-content-center gap-3">
            <button class="btn btn-light" onclick="hideError('error-9')">
                <i class="fas fa-home me-2"></i>首页
            </button>
            <button class="btn btn-secondary" onclick="hideError('error-9')">
                <i class="fas fa-sitemap me-2"></i>网站地图
            </button>
        </div>
    </div>
</div>

<!-- 10. 脉冲动画404 -->
<div id="error-10" class="fullscreen-error error-accent-4 error-pulse">
    <div class="error-content">
        <div class="error-code">404</div>
        <h3 class="error-title">页面未找到</h3>
        <p class="error-message">您访问的页面无法找到。请使用以下选项继续您的浏览。</p>
        <div class="d-flex flex-wrap justify-content-center gap-3">
            <button class="btn btn-light" onclick="hideError('error-10')">
                <i class="fas fa-home me-2"></i>返回首页
            </button>
            <button class="btn btn-dark" onclick="hideError('error-10')">
                <i class="fas fa-envelope me-2"></i>报告问题
            </button>
        </div>
    </div>
</div>


<script>
	// 显示404页面
	function showError(errorId) {
		// 先隐藏所有错误页面
		document.querySelectorAll('.fullscreen-error').forEach(error => {
			error.classList.remove('show');
		});

		// 显示指定错误页面
		const error = document.getElementById(errorId);
		if (error) {
			// 触发重排后添加show类以启用动画
			setTimeout(() => {
				error.classList.add('show');
			}, 10);
		}
	}

	// 隐藏404页面
	function hideError(errorId) {
		const error = document.getElementById(errorId);
		if (error) {
			error.classList.remove('show');
		}
	}

	// 点击错误页面外部关闭
	document.querySelectorAll('.fullscreen-error').forEach(error => {
		error.addEventListener('click', function (e) {
			if (e.target === this) {
				this.classList.remove('show');
			}
		});
	});
</script>

    
